<template>
	<view class="container">
			<u-form-item :border-bottom="false" label-width="150" label="新手机号" prop="phone">
				<u-input placeholder="请输入新手机号" type="number" maxlength="11" v-model="params.phone" />
			</u-form-item>
			<u-form-item :border-bottom="false" label-width="150"  label="验 证 码" prop="phone">
				<view class="codeview" style="width:60%;">
					<u-input type="number" class="input" :clearable="clearable" id="ddcode" v-model="params.code" placeholder="请输入短信验证码" :maxLength="4" ></u-input>
				</view>
				<view class="send" id="sendCode">
				   <button size="mini" :disabled="btnDis" @tap="sendCode">{{btnText}}</button>
				</view>
			</u-form-item>
		<view class="btn" @click="submit">
			确定修改
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations, mapGetters, mapActions } from 'vuex';
import mInput from '@/components/m-input/m-input.vue';
import graceChecker from '@/common/graceChecker.js';
import formRuleConfig from '@/config/formRule.config.js';

export default {
	components: {
		mInput
	},
	data() {
		return {
			current: 0,
			clearable:true,
			placeholderColor:"#f00",
			loginTitleTxt: this.$mConfig.loginTitleTxt,
			copyrightTxt: this.$mConfig.copyrightTxt,
			btnDis: false,
			submitBtnDis: false,
			btnText: '获取验证码',
			params: {
				name: '',
				password: ''				
			},
			isAggre:1,//是否同意协议
			reqBody: {},
			// 如果为登录状态 默认跳转的地址
			redirectRoute: this.$mRoutesConfig.main,
			routeQuery: {},
			latitude:'',
			longitude:'',
			providerList: [],
			positionTop: 0,
			hasProvider: true,
			openid:'',
			userinfo:[]
		};
	},
	onLoad(query) {
	},
	onShow(){
	},
	onBackPress(options) {
		if (options.from === 'navigateBack') {  
			return false;  
		}  
		this.back();  
		return true;  
    },
	methods: {	
		change(e){
			console.log('current',e);
			this.current = e;
		},
		getLoginName(e){
			// #ifdef APP-PLUS
			console.log(e);
			var val = e.detail.value;
			this.params.name = val;
			// #endif
		},
		back() {  
			uni.navigateBack({  
				delta: 2 
			});
		},
		clearPassword(){
			this.params.password = '';
		},
		clearName(){
			this.params.name = '';
		},
		blue_input(){
			uni.hideKeyboard();			
		},
		// 登录
		async submit() {	
			if(this.params['phone'] === undefined){
				uni.showToast({
					title:"请输入新手机号",
					icon:'none'
				})
				return;
			}
			if(this.params['code'] === undefined){
				uni.showToast({
					title:"请输入验证码",
					icon:'none'
				})
				return;
			}
			this.reqBody['phone'] = this.params['phone'];
			this.reqBody['code'] = this.params['code'];			
			let data = await this.$apis.updatePhone(this.reqBody);	
			if(data.code == 200){
				let userInfo = this.$store.state.userInfo;
				userInfo.phone = this.params['phone'];
				this.$store.commit('SET_USERINFO', userInfo);
				uni.setStorageSync('userInfo', userInfo);
				uni.showToast({
					title: "修改成功",
					icon: 'none'
				});
				setTimeout(() => {
					uni.navigateBack({
						delta:1
					})
				},1000)
			}else{
				uni.showToast({
					title: data.message,
					icon: 'none'
				});
				this.submitBtnDis = false;
				return;
			}
		},

		// 发送验证码
		async sendCode() {
			console.log('send')
		
			if (!this.params.phone) {
				uni.showToast({
					title: "请输入手机号",
					icon: 'none'
				});
				return;
			}
            //#ifdef APP-PLUS
			let clientId = plus.push.getClientInfo().clientid;
			//#endif
			
			//发送验证码
           
           await this.$apis.getSmsCode({
           	phone: this.params.phone
           });

			// uni.showToast({
			// 	title: '发送成功'
			// });
			// 开启倒计时
			this.countDown();
		},

		// 验证码倒计时
		countDown() {
			let t = null;
			let timer = 60;
			this.btnDis = true;
			clearInterval(t);
			this.btnText = `${timer}s`;
			t = setInterval(() => {
				if (timer == 0) {
					clearInterval(t);
					this.btnText = '重新发送';
					this.btnDis = false;
					return;
				}
				timer--;
				this.btnText = `${timer}s`;
			}, 1000);
		},
		async bindHome(){
			uni.switchTab({
				url: '/pages/main/main'
			});
		}
	}
};
</script>


<style scoped lang="scss">
	page {background-color: #f4f4f4;}
	#sendCode{align-items: flex-end;font-size:30rpx;}
	.container {
		background-color: #f4f4f4;
		.u-form-item {margin-top: 20rpx;}
		.btn {
			width: 690upx;
			margin-left: 30upx;
			height: 80upx;
			background-color: #AB61FF;
			margin-bottom: 30upx;
			border-radius: 40upx;
			text-align: center;
			line-height: 80upx;
			color: #fff;
			font-size: 32upx;
			position: absolute;
			bottom: 107upx;
		}
			.u-form-item{
				background-color: #fff;
				padding:  0 30upx;
				.u-form-item--left{
					margin-right: 50upx;
				}
			}
		.line {
			height: 20upx;
			width: 100%;
		}
		.send {
			border-radius: 0 4rpx 4rpx 0rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			flex: 0 0 256rpx;
			justify-content: center;
		}
			
		.button {
			height: 100%;
			width: 100%;
			color:#fff;
		}
		button,button[type=primary] {
				background:#AB61FF;
				border-radius:40rpx;
				color:#fff;
				border:0;
				z-index: 20;
		}
			button[disabled][type=primary],button[disabled] {
				color: #fff;
				background:#AB61FF;
				border-radius:40rpx;
			}
			.sendCode {
				display: flex;
				align-items: right;
				flex-direction:row-reverse;
				box-sizing: border-box;
				align-items: stretch;
			
				//width:230rpx;
				button {
					display: flex;
					align-items: center;
					justify-content: center;
					width: 230rpx;
					height: 52rpx;
					line-height: 52rpx;
					background-color: #fa8500;
					border-radius: 26rpx;
					color: #fff;
					font-size: 26rpx;
				
					&::after{
						display: none;
					}
				}
			}
	}
</style>
